<template>
    <div>
        <el-row>
            <el-col :span="6"><el-input v-model="name" size="mini" placeholder="请输入维修厂名称"></el-input></el-col>
            <el-col :span="6"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button>
            &nbsp;<el-button type="primary"  size="mini" icon="el-icon-circle-plus" @click="handleAdd">添加</el-button></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="维修厂编号"
                        v-if="false">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="维修厂名称">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="维修厂地址">
                </el-table-column>
                <el-table-column
                        prop="phoneNum"
                        label="维修厂电话">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--新增/修改 Form -->
            <el-dialog title="车辆管理" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="维修厂名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" placeholder="维修厂名称" auto-complete="off"></el-input>
                    </el-form-item>
                     <el-form-item label="维修厂地址" :label-width="formLabelWidth">
                        <el-input v-model="form.address" placeholder="维修厂地址" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="维修厂电话" :label-width="formLabelWidth">
                        <el-input v-model="form.phoneNum" placeholder="维修厂电话" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="form.remark" placeholder="备注" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveInfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
        <!--分页插件-->
        <el-row>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData:[],
            currentPage:1,//当前页面，默认1
            pageSize:5,//每页显示条数
            total:100,//分页总数量，默认值随便写，初始化时赋予新值
            dialogFormVisible:false,
            formLabelWidth: '120px',
            form:{},
            name:''
        };
    },
    created:function() {
         //初始化
        this.loadData();
    },
    methods:{
        //加载数据
        loadData(){
            //动态菜单请求
            this.$http.post("/api/cars/maintainShop/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                carname:this.carname
                }).then((response) => {
                    if(response.data.code==2000){
                        console.log(response);
                        this.tableData = response.data.data.list;
                        this.total = response.data.data.total;
                    };
            });
                    
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize=val;
            this.loadData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage=val;
            this.loadData();
        },
        search(){
            this.loadData();
        },
        //处理添加
        handleAdd(){
            //清空原来form
            this.form={};
            //更新显示名称
            this.title="品牌添加";
            //对话框显示
            this.dialogFormVisible=true;
        },
        //处理编辑（弹出部门更新对话框）
        handleEdit(index, row) {
            console.log(index, row);
            this.form=JSON.parse(JSON.stringify(row));
            // this.form=row;
            //更新显示名称
            this.title="品牌更新";
            //对话框显示
            this.dialogFormVisible=true;
        },
        //提交表单数据（添加或者更新）
        saveInfo(){
            var _this = this;
            var  url ='/api/cars/maintainShop/update';
            if(this.form.id==''||this.form.id==null){
            url="/api/cars/maintainShop/insert"
        }
         _this=this;
        //提交方法
        this.$http.post(url, this.form)
            .then(function (response) {
                console.log(response);
                //提交成功
                if(response.data.code==2000){
                    //关闭弹出框
                    _this.dialogFormVisible=false;
                    //提示更新成功
                    _this.$message({
                        //  message: '恭喜你，这是一条成功消息',
                        message: response.data.message,
                        type: 'success'
                    });
                    //重新加载数据
                    _this.loadData();
                    }else {
                        _this.$message.error(response.data.message);
                    }
                })
                .catch(function (error) {
                    _this.$message.error('错了哦，这是一条错误消息');
                });
            },
            handleDelete(index, row) {
                var _this = this;
                console.log(index, row);
                _this=this;
                //确认弹框
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //执行删除
                this.$http.delete('/api/cars/maintainShop/deleteById?id='+row.id)
                    .then(function (response) {
                        //判断删除是否成功
                        if(response.data.code==2000){
                            //提示
                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            //重新加载数据
                            _this.loadData();
                        }else {
                            _this.$message.error(response.data.message);
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        _this.$message.error('删除失败!');
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
    }
}
</script>
